<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="fn">app</button>
        <hr/>
        <child ref="suibian"></child>
    </div>
</body>
<script>
    // ref与组件结合使用，获取到的是该组件实例。
    // 通过该特点可以实现父级操作子组件中的数据状态。
    new Vue({
        el:"#app",
        methods:{
            fn(){
                // console.log(this.$refs.suibian.num);
                this.$refs.suibian.num++;
            }
        },
        components:{
            Child:{
                data(){
                    return {
                        num:1
                    }
                },
                template:(`
                    <button @click="num++">{{num}}</button>
                `)
            }
        }

    })
</script>
</html>